<template>
  <div style="width:100%;">
      <div class="sub-li" @click="goCompanyDetail(company.companyId)" v-for="company in companyList" :key="company.companyId" >
        <div class="sub-li-top">
          <div class="company_img">
            <img style="width:50px;height:50px"
                 :src="company.companyLogoUrl"
                 alt="">
          </div>
          <div class="company-info">
            <h3>{{ company.companyName }}</h3>
            <p class="company_text">
              {{ company.companyScale }}
              <el-divider direction="vertical"></el-divider>
              {{ company.industry }}
              <el-divider direction="vertical"></el-divider>
              {{ company.companyType==0?'国企':company.companyType==1?'央企':company.companyType==2?'民企':'外企' }}
            </p>
          </div>

        </div>
        <el-divider style="margin: 8px 0 12px 0;"></el-divider>
        <div class="sub-li-bottom"><span>{{ codeToText(company.cityCode) }}</span><span style="float: right">  {{ company.financeList }}</span></div>
      </div>
    <el-pagination
        background
        layout="prev, pager, next"
        :total=total
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
  </div>
</template>

<script>
import eventBus from "@/assets/js/eventBus";
import {getCompanyList} from "@/network/recruit";
import {CodeToText} from "element-china-area-data";
export default {
  name: "CompanyResult",
  props:['companyName'],
  data(){
    return{
      value:true,
      currentPage:1,
      total:0,
      pageSize:31,
      companyList:[]
    }
  },
  created() {
    eventBus.$on("sendByBus",data => {
      this.companyName= data;
      this.allCompanyList(data);
    })
  },
  mounted() {
    this.allCompanyList(this.companyName);
  },
  methods:{
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
    goCompanyDetail(companyId){
      this.$router.push({name:"companyDetail",params:{companyId:companyId}});
    },
    allCompanyList(data){
      getCompanyList(data,this.currentPage,this.pageSize).then(res=>{
        this.companyList = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    codeToText(value){
      return CodeToText[value];
    },
  }
}
</script>

<style scoped>
.sub-li {
  display: inline-block;
  margin: 8px;
  height: 120px;
  width: 31.9%;
  padding: 16px 20px;
  box-sizing: border-box;
  background-color: white;
  cursor: pointer;
}

p {
  margin: 0 0;
}

.sub-li-top {
  height: 50px;
  line-height: 50px
}

.company-info {
  display: inline-block;
  height: 50px;
  margin-left: 16px;
}

.company-info h3 {
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  color: #414a60;
  line-height: 22px;
  margin: 0 0 7px 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.company_text {
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  color: #8d92a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company_img{
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;
  float: left;
}
.el-divider--horizontal {
  height: 0.5px;
  margin: 8px 0 10px 0;
}
.sub-li-bottom{
  color: #61687c;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
  line-height: 20px;
}
/deep/ .el-pagination.is-background .el-pager li{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-next{
  background-color:white;
}
/deep/ .el-pagination.is-background .btn-prev{
  background-color:white;
}
</style>